<template>
    <div class="operatitle"></div>
    <div class="operitem" v-for="item in list" :key="item.name">
        <img v-if="item.name=='无证经营'" src="../../../assets/mahjong/icon21.png" alt="">
        <img v-if="item.name=='住改商'" src="../../../assets/mahjong/icon20.png" alt="">
        <img v-if="item.name=='消防隐患'" src="../../../assets/mahjong/icon22.png" alt="">
        <div class="operitem-r">
            <span class="span1">{{item.name}}</span>
            <span class="span2 setColor">{{item.num1}}&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;{{item.num2}}%</span>
        </div>
    </div>
    <!-- 下面是另外一部分 -->
    <div class="operatitlee"></div>
    <div class="noiseownership-title1">
        <div class="tl1">预警等级</div>
        <div class="tl2">地址</div>
        <div class="tl3">发生件数</div>
    </div>
    <div class="noiseownership-content">
        <div class="item" v-for="(item,index) in list2" :key="index">
            <div class="tl1">
                <span :class="item.type===1?'bg1':''">{{ item.type===1?'高级':'' }}</span>
            </div>
            <div class="tl2">{{ item.name }}</div>
            <div class="tl3">{{ item.num }}</div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';

let list = ref([
    { name:'无证经营', num1: 500, num2: 54.05},
    { name:'住改商', num1: 200, num2: 21.62 },
    { name:'消防隐患', num1: 225, num2: 24.33 }
])

let list2 = ref([
    {name:'天星桥街道凤天花园',type:1,num:102},
    {name:'天星桥街道金阳易诚国际',type:1,num:93},
    {name:'西永街道雅豪丽景',type:1,num:71},
    {name:'沙坪坝街道巴蜀风韵产业园',type:1,num:70},
    {name:'沙坪坝街道隆鑫天雨方·1期',type:1,num:63},
    {name:'土湾街道科强锦龙苑',type:1,num:58},
    {name:'新桥街道黄角湾小区',type:1,num:42},
    {name:'覃家岗街道斌鑫胜景雅苑',type:1,num:31},
    {name:'石井坡街道联芳花园·六期',type:1,num:22},
    {name:'沙坪坝区土湾嘉新',type:1,num:20},
])
</script>

<style lang="less" scoped>
.operatitle {
    width: 100%;
    height: 36px;
    margin-top: 9px;
    background-image: url("../../../assets/mahjong/icon18.png");
    background-size: 100% 100%;
    margin-bottom: 4px;
}
.operatitlee{
    width: 100%;
    height: 36px;
    margin-top: 9px;
    background-image: url("../../../assets/mahjong/icon17.png");
    background-size: 100% 100%;
    margin-bottom: 4px;
}
.operitem{
    width: 100%;
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    img{
        width: 32px;
        height: 32px;
        margin-right: 4px;
    }
    .operitem-r{
        flex: 1;
        height: 32px;
        background-image: url("../../../assets/mahjong/icon19.png");
        background-size: 100% 100%;
        box-sizing: border-box;
        padding: 0 16px 0 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .span1{
            font-size: 12px;
            color: #FFFFFF;
        }
        .span2{
            font-family: AlimamaShuHeiTi-Bold;
            font-weight: bold;
            font-size: 16px;
            color: #FFFFFF;
        }
    }
}

.noiseownership-title1{
    width: 100%;
    height: 28px;
    background: rgba(2, 49, 100, .2);
    margin-top: 12px;
    box-sizing: border-box;
    padding: 0 0 0 12px;
    display: flex;
    align-items: center;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 12px;
    color: #159AFF;
    .tl1{
        width: 124px;
    }
    .tl2{
        flex: 1;
    }
    .tl3{
        width: 80px;
    }
}
/* 隐藏滚动条轨道 */
.noiseownership-content::-webkit-scrollbar {
    display: none; /* 对于Chrome和Safari */
}
.noiseownership-content{
    width: 100%;
    height: 220px;
    overflow-y: scroll;
    .item{
        width: 100%;
        height: 32px;
        margin-top: 4px;
        font-family: PingFangSC-SNaNpxibold;
        font-weight: 600;
        font-size: 12px;
        color: #D0DEEE;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 0 0 0 12px;
        .tl1{
          width: 124px;
          span{
            padding: 4px 6px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            font-size: 12px;
          }
        }
        .tl2{
            flex: 1;
        }
        .tl3{
          width: 80px;
        }
        .bg1{
            background: rgba(255, 56, 56, .2);
            color: #FF3838;
        }
    }
    .item:nth-child(odd){
        background: rgba(71, 138, 138, 0);
        box-shadow: inset 0 -1px 0 0 rgba(108, 128, 151, 0.5);
    }
    .item:nth-child(even){
        background: rgba(71, 107, 138, 0.1);
        box-shadow: inset 0 -1px 0 0 rgba(108, 128, 151, 0.5);
    }
}
</style>
